
$(function(){
// 渲染页面
var currentpage = 1;
var pageSize = 5;
function render(){
    $.ajax({
        url:'/category/querySecondCategoryPaging',
        type:'get',
        data:{
            page:currentpage,
            pageSize:pageSize
        },
        dataType:'json',
        success:function(res){
            // console.log(res);
            $('tbody').html(template('temp',res))
            setPage(res.total)
            
        }
    })
}
render()
// 插入页码
function setPage(total){
    $("#paginator").bootstrapPaginator({
        bootstrapMajorVersion:3,//默认是2，如果是bootstrap3版本，这个参数必填
        currentPage:currentpage,//当前页
        totalPages:Math.ceil(total/pageSize),//总页数
        size:"small",//设置控件的大小，mini, small, normal,large
        onPageClicked:function(event, originalEvent, type,page){
          //为按钮绑定点击事件 page:当前点击的按钮值
          currentpage = page
          render()
        }
    });
}


// 渲染下拉框的一级分类list
$('.dropdown-toggle').on('click',function(){
    $.ajax({
        url:'/category/queryTopCategoryPaging',
        type:'get',
        data:{
            page:1,
            pageSize:100
        },
        dataType:'json',
        success:function(res){
            console.log(res);
        $('.one-list').html(template('temp-one',res)) 
        }
    })
})
// 下拉框选中后的更新操作
$('.one-list').on('click','a',function(){
    $('#one-val').text($(this).text())
    $('#categoryId').val($(this).data('id'))
    console.log($('#categoryId').val());
    $('#two-form').data('bootstrapValidator').updateStatus('categoryId', 'VALID')

})




// 上传图片
$("#fileupload").fileupload({
    dataType:"json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done:function (e, data) {
        console.log(data);
        
        // 更新图片
      $('.img-box img').attr('src',data.result.picAddr)
    //   保存id
    $('#brandLogo').val(data.result.picAddr)
    // console.log($('#brandLogo').val());
    // 清除错误提醒
    $('#two-form').data('bootstrapValidator').updateStatus('brandLogo', 'VALID')
    

    }
});

// 添加表单校验功能
//使用表单校验插件
$('#two-form').bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [':disabled'],
  
    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
  
    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      categoryId: {
        validators: {
          //不能为空
          notEmpty: {
            message: '请选择一级分类'
          }
        }
      },
      brandName: {
        validators: {
          //不能为空
          notEmpty: {
            message: '请输入二级分类'
          }
        }
      },
      brandLogo: {
        validators: {
          //不能为空
          notEmpty: {
            message: '请上传图片'
          }
        }
      },
    }
})


// 点击添加按钮更新内容 用on-success来做
$("#two-form").on('success.form.bv', function (e) {
    e.preventDefault();
    //使用ajax提交逻辑
    $.ajax({
        url:'/category/addSecondCategory',
        type:'post',
        data:$('#two-form').serialize(),
        dataType:'json',
        success:function(res){
            // console.log(res);            
            $('#myModal').modal('hide')
            render()
            $("#two-form").data('bootstrapValidator').resetForm(true)
            $('#one-val').text('请选择一级分类')
            $('.img-box img').attr('src','./images/default.png') 
        }
    })
});

})